<template>
  <modal-bg ref="modalRef" :maskClosable="false">
    <view
      style="
        position: absolute;
        top: 30%;
        left: 85rpx;
        width: 580rpx;
        background: linear-gradient(#f0e9d1 0%, #ffffff 51%, #ffffff 100%);
        box-shadow: inset 0rpx 1rpx 35rpx 1rpx #ffffff;
        border-radius: 40rpx;
        font-size: 32rpx;
        color: #222222;
        text-align: center;
      ">
      <view
        style="
          width: 140rpx;
          height: 140rpx;
          background: #edb302;
          position: absolute;
          border-radius: 70rpx;
          top: -70rpx;
          left: 220rpx;
        ">
        <image
          :src="`https://static.tospurfang.com/asset/tip_${info.success ? 'success' : 'fail'}.png`"
          mode="scaleToFill"
          style="width: 60rpx; height: 60rpx; margin: 40rpx" />
      </view>
      <view v-if="info.title" style="font-weight: 600; margin-top: 111rpx">{{ info.title }}</view>
      <view v-if="info.content" style="margin: 20rpx 100rpx">{{ info.content }}</view>
      <view
        @click="onOK"
        style="
          width: 250rpx;
          height: 80rpx;
          background: #042275;
          border-radius: 44rpx;
          margin: 60rpx 165rpx;
          font-size: 32rpx;
          color: #ffffff;
          line-height: 80rpx;
        ">
        确定
      </view>
    </view>
  </modal-bg>
</template>

<script setup>
  import modalBg from './modal-bg.vue'

  import { ref } from 'vue'
  const info = ref({})
  const modalRef = ref(false)
  const show = (inf) => {
    info.value = inf
    modalRef.value.show()
  }
  const hide = () => {
    modalRef.value.hide()
  }

  function onOK() {
    hide()
    if (info.value.ok) info.value.ok()
  }

  defineExpose({ show, hide })
</script>

<style lang="scss" scoped></style>
